<template>
  <div class="chart-container">
    <v-chart :options="options" :theme="theme" :autoresize="true" />
  </div>
</template>

<style>
/**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
.echarts {
  width: 100%;
  height: 100%;
  min-height: 50px;
}
.chart-container {
  width: 100%;
  height: 100%;
}
</style>

<script>
import ECharts from "vue-echarts";
require("echarts");
import { mapState } from "vuex";
export default {
  name: "ChartSingleDimension",
  components: {
    "v-chart": ECharts,
  },
  props: {
    title: {
      type: String,
      require: false,
      default: "",
    },
    dataSource: {
      type: Array,
      require: true,
    },
    type: {
      type: String,
      require: true,
    },
    typeOptions: {
      type: String,
      require: false,
    },
    colorTheme: {
      type: String,
      require: false,
    } /** theme: dark, infographic, macarons, roma, shine, vintage */,
  },
  computed: {
    ...mapState({
      stateTheme: (state) => state.theme.theme,
    }),
  },
  watch: {
    stateTheme(newVal, oldVal) {
      this.theme = newVal;
      console.log(newVal, oldVal);
    },
  },
  data() {
    const options = {
      title: {
        text: this.title,
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      grid: {
        top: "12%",
        left: "6%",
        right: "6%",
        bottom: "12%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          magicType: {
            type: ["line", "bar"],
          },
        },
      },
      animationDuration: 1000,
    };
    if (this.type === "line" || this.type == "bar") {
      options.xAxis = {
        type: "category",
        data: this.dataSource.map((item) => item.name),
      };
      options.yAxis = {
        type: "value",
      };
      options.series = [
        {
          data: this.dataSource.map((item) => item.value),
          type: this.type,
        },
      ];
    } else if (this.type === "pie") {
      console.log("pie");
    }
    return {
      options,
      theme: this.$store.state.theme.theme,
    };
  },
  mounted() {
    console.log(this.theme);
  },
  beforeUpdate() {
    this.theme = this.$store.state.theme.theme;
  },
  updated() {
    console.log(this.theme);
  },
};
</script>
